 * {
     margin: 0;
     padding: 0;
 }

 li {
     display: inline-block;
     list-style: none;
     margin-right: 15px;
 }

 a {
     text-decoration: none;
     color: #000;
 }

 body {
     min-width: 1280px;
 }

 header {
     width: 100%;
     min-width: 1280px;
     height: 50px !important;
     background-color: #fff;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;

     .navs {
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;

         ul {
             height: 100%;

             li {
                 line-height: 50px;
                 margin-right: 25px;

                 a {
                     display: inline-block;
                     min-width: 100px;
                     height: 100%;
                     text-align: center;
                 }
             }

             li :hover {
                 background-color: #ccc;
                 opacity: 0.6;
             }
         }
     }
 }

 main {
     h1 {
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 600;
         font-size: 24px;
         text-align: center;
         margin-bottom: 24px;
         letter-spacing: 0.06em;
         color: #222;
         padding: 0 48px;
     }

     .box {
         width: 100%;
         height: 800px;
         background: url(/img/pic6.jpg) center;
         background-size: cover;

         .content {
             padding-top: 170px;

             h1 {
                 font-size: 36px;
             }

             p {
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-size: 24px;
                 margin-top: 40px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 color: #222;
                 font-weight: 300;
                 padding: 0 48px;
                 text-align: center;


             }
         }
     }

     .box1 {
         padding-top: 50px;
         padding-left: 40px;
         height: 800px;
         background: url(/img/pic5.jpg) center;
         background-size: cover;

         .content {
             margin-top: 50px;
             margin-left: 40px;
             width: 500px;

             h1 {
                 text-align: left;
                 padding-left: 0 !important;
             }

             p {
                 margin-top: 40px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 color: #222;


             }
         }
     }

     .box2 {
         height: 800px;
         background: url(/img/pic2.jpg) center;
         background-size: cover;

         .content {
             padding-top: 88px;
             padding-left: 48px;
             width: 500px;

             h2 {
                 margin-bottom: 28px;
                 font-size: 24px;
                 line-height: 1;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 600;
                 letter-spacing: 0.05em;
             }

             p {
                 font-size: 16px;
                 letter-spacing: 0.15em;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 400;
                 line-height: 2.0;
                 color: #222;
             }
         }

     }

     .box3 {
         height: 800px;
         background: url(/img/pic3.jpg) center;
         background-size: cover;

         .content {
             padding-top: 150px;
             float: right;
             margin-right: 200px;
             width: 500px;

             h2 {
                 margin-bottom: 28px;
                 font-size: 24px;
                 line-height: 1;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 600;
                 letter-spacing: 0.05em;
                 color: #fff;

             }

             p {
                 margin-top: 10px;
                 font-size: 16px;
                 letter-spacing: 0.15em;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 400;
                 line-height: 2.0;
                 color: #fff;
             }
         }

     }

     .box4 {
         height: 800px;
         background: url(/img/pic4.jpg) center;
         background-size: cover;

         .content {
             padding-top: 88px;
             padding-left: 48px;
             width: 400px;

             h2 {
                 margin-bottom: 28px;
                 font-size: 24px;
                 line-height: 1;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 600;
                 letter-spacing: 0.05em;
                 color: #222;

             }

             p {
                 margin-top: 10px;
                 font-size: 16px;
                 letter-spacing: 0.15em;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 400;
                 line-height: 2.0;
                 color: #222;
             }
         }

     }

     .box5 {
         height: 800px;
         background: url(/img/pic1.jpg) center;
         background-size: cover;

         .content {
             padding-top: 88px;
             padding-left: 48px;
             width: 400px;

             h2 {
                 margin-bottom: 28px;
                 font-size: 24px;
                 line-height: 1;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 600;
                 letter-spacing: 0.05em;
                 color: #222;

             }

             p {
                 margin-top: 10px;
                 font-size: 16px;
                 letter-spacing: 0.15em;
                 font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                 font-weight: 400;
                 line-height: 2.0;
                 color: #222;
             }
         }

     }
 }


 //section
 .first {
     .content {
         //height: 800px;
         background-color: #212121;
         padding: 120px 0 120px 0;
         color: #fff;

         h1 {
             font-size: 24px;
             font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
             font-weight: 600;
             letter-spacing: 0.050em;
             color: #FFFFFF;
             margin-bottom: 24px;
             text-align: center;
             font-family: "ヒラギノ明朝 W6 JIS2004", "Hiragino Mincho W6 JIS2004";
         }

         p {
             font-size: 16px;
             font-weight: 400;
             letter-spacing: 0.080em;
             color: #FFFFFF;
             line-height: 2em;
             text-align: center;
             font-family: "ヒラギノ明朝 W3 JIS2004", "Hiragino Mincho W3 JIS2004";
         }

         ul {
             margin-top: 100px;

             li {
                 display: block;
                 margin-left: 70px;
                 text-align: center;
             }
         }

         h2 {
             margin-top: 80px;
             margin-bottom: 50px;
             font-size: 14px;
             font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
             font-weight: 600;
             letter-spacing: 0.050em;
             color: #FFFFFF;
             margin-bottom: 14px;
             text-align: center;
             font-family: "ヒラギノ明朝 W6 JIS2004", "Hiragino Mincho W6 JIS2004";
         }
     }
 }

 .second {
     padding: 120px 48px 0 48px;
     max-width: 1200px;
     margin: 0 auto;

     h1 {
         font-size: 24px;
         line-height: 1.83;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 600;
         margin-bottom: 28px;
         text-align: center;
         letter-spacing: 0.06em;
         position: relative;
         z-index: 4;
     }

     p {
         font-size: 16px;
         line-height: 1.87;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 400;
         text-align: center;
         position: relative;
         z-index: 4;
         margin-bottom: 84px;
         letter-spacing: 0.14em;
     }

     ul {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
         margin-bottom: 40px;
         overflow: hidden;
         position: relative;
         transition: height 400ms cubic-bezier(0.02, 0.01, 0.47, 1);
     }


     li {
         width: calc((100vw - 96px) / 5);
         height: calc((((100vw - 96px) - 15px) / 3) * 0.666);
         margin-bottom: 8px;

     }

     img {
         width: 100%;
         height: 100%
     }

     .title {
         position: absolute;
         bottom: 20px;
         left: 20px;
         opacity: 0;
         display: block;
         color: #222;
         font-size: 15px;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 600;
         line-height: 1.87em;
         text-align: left;
         letter-spacing: 0.12em;
     }
 }

 .third {
     padding: 120px 48px;
     max-width: 1200px;
     margin: 0 auto;

     h1 {
         font-size: 24px;
         line-height: 1.83;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 600;
         margin-bottom: 28px;
         text-align: center;
         letter-spacing: 0.06em;
         position: relative;
         z-index: 4;
     }

     p {
         font-size: 16px;
         line-height: 1.87;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 400;
         text-align: center;
         position: relative;
         z-index: 4;
         margin-bottom: 84px;
         letter-spacing: 0.14em;
     }

     ul {
         width: 100%;
         display: flex;
         justify-content: space-around;
         margin-bottom: 80px;
     }

     figure {
         width: 100%;
         height: 300px;
     }

     li a figure:after {
         content: "";
         box-sizing: border-box;
         padding-top: 58%;
         display: block;

     }

     a :hover {
         background-color: #ccc;
         opacity: 0.6;
     }

     h2 {
         font-size: 15px;
         padding: 28px;
         text-align: justify;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 400;
         line-height: 1.7;
         letter-spacing: 0;
     }

     li :hover {
         h2 {
             opacity: 0.5;
         }
     }

     .full {
         border: 1px solid #ccc;
         border-radius: 100vh;
         padding: 20px;

     }
 }

 .fourth {
     margin: 0 auto;
     padding-bottom: 120px;

     li {
         display: block;
         padding: 0 250px;


     }

     a {
         border-bottom: 1px solid #ccc;
         display: block;
         width: 100%;
         padding: 36px 0;
         height: 90px;
         box-sizing: border-box;
         font-size: 18px;
         line-height: 1em;
         font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
         font-weight: 600;
         letter-spacing: 0.12em;
         background: url(/img/next.svg) no-repeat right center/18px 18px;
     }

 }

 footer {
     background: #000;

     .lis {
         padding-top: 50px;
         padding-left: 15%;
         padding-right: 15%;
         display: flex;
         justify-content: space-between;

         .box {
             display: inline-block;

             dl {
                 dt {
                     color: #fff;
                 }

                 .sec-dt {
                     margin-top: 20px;
                 }

                 dd {
                     color: #A7AEB1;
                     font-size: 13px;
                     line-height: 13px;
                     font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
                     font-weight: 400;
                     letter-spacing: 0.1em;
                     backface-visibility: hidden;
                     position: relative;
                     padding: 6px 0;
                 }
             }


         }
     }

     .footer_bottom {
         margin-top: 80px;
         padding-bottom: 50px;
         text-align: center;

         a {
             width: 280px;
             height: 42px;
             color: #fff;
             margin-bottom: 40px;
             font-size: 15px;
             line-height: 1;
             font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
             font-weight: 600;
             letter-spacing: 0.27em;
             padding: 20px 30px;
             border-radius: 10px;
             border: 1px solid #fff;
         }

         .title {
             margin-top: 50px;
             display: block;
             color: #A7AEB1;

         }
     }
 }